<template>
	<view class="IndexGoods">
		<!-- 猜你喜欢 -->
		<view class="index-header">
			<view class="title-icon uni-icon uni-icon-star"></view>
			<view class="title-box">
				<text class="main">猜你喜欢</text>
				<text class="sub">Guess You Like It</text>
			</view>
			<text class="more uni-icon uni-icon-arrowright"></text>
		</view>
		
		<view class="index-goods">
			<view 
				v-for="item in list" :key="item.id"
				class="item"
				@tap="toDetail(item)"
			>
				<view class="image-wrapper">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<text class="title">{{item.title}}</text>
				<view class="info">
					<view class="price">￥{{ item.price }}</view>
					<view class="slogan">{{ item.slogan }}人付款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>	
	import { mapState } from 'vuex';
	import { links } from '../../common/mixins.js'
	
	export default {
		name: 'IndexGoods',
		mixins: [ links ],
		props: {
			theData: {
				type: Array,
				required: true
			}
		},
		computed: {
			...mapState ([
				'debugSetting' // 将 this.debugSetting 映射为 this.$store.state.debugSetting
			]),
			list() {
				let list = JSON.parse(JSON.stringify(this.theData));
				return list.map((item) => {
					let {
						id: id,
						img: img,
						title: title,
						price: price,
						slogan: slogan,
						url: url,
						...rest
					} = item;
					img = this.debugSetting.resourcePath + img;
					return { id, img, title, price, slogan, url, rest};
				});
			},
		},
		methods: {
			toDetail(item) {
				this.pushPage('/pages/goods/GoodsDetail', { id: item.id });
			}
		}
	}
</script>

<style lang="scss">
	.IndexGoods {
		.index-header{
			display:flex;
			align-items:center;
			height: 140upx;
			padding: 6upx 30upx 8upx;
			margin-top: 16upx;
			border-top: 16upx solid #f5f5f5;
			background: #fff;
			.title-icon{
				color: #f7965e;
				font-size: 70upx;
				flex-shrink: 0;
				width: 80upx;
				height: 80upx;
				margin-right: 20upx;
			}
			.title-box{
				flex: 1;
				display: flex;
				flex-direction: column;
				.main{
					font-size: 34upx;
					line-height: 1.3;
				}
				.sub{    
					color: #909399;
					font-size: 24upx;
				}
			}
			.more{
				color: #909399;
				font-size: 40upx;
			}
		}
		.index-goods{
			width: 92%;
			padding: 0 4% 3vw 4%;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.item{
				width: 48%;
				border-radius: 6upx;
				background-color: #fff;
				margin: 0 0 25upx 0;
				box-shadow: 0upx 5upx 25upx rgba(0, 0, 0, 0.1);
			}
			.image-wrapper{
				width: 100%;
				height: 330upx;
				border-radius: 3px;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}
			.title{
				width: 92%;
				padding: 10upx 4%;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: justify;
				overflow: hidden;
				line-height: 1.4;
				font-size: 28upx;
				min-height: 72upx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				width: 92%;
				padding: 10upx 4% 10upx 4%;
				.price {
					color: #e65339;
					font-size: 26upx;
					font-weight: 600;
				}
				.slogan {
					color: #807c87;
					font-size: 22upx;
				}
			}
		}
	}
</style>
